<template>
    <div>
        <el-menu :default-active="this.$route.path" router class="el-menu-vertical-demo" :unique-opened="true">
            <el-submenu :index="i+''" v-for="(item,i) in navList" :key="i">
                <template slot="title">
                    <i :class="item.icon"></i>
                    <span slot="title">{{ item.title }}</span>
                </template>
                <el-menu-item :index="nav.name" v-for="(nav,i) in item.subNav" :key="i">
                    {{ nav.navItem }}
                </el-menu-item>
            </el-submenu>
        </el-menu>
    </div>

</template>

<script>

    export default {
        name: "Navigation",
        data() {
            return {
                isCollapse: true,
                navList: [
                    {
                        title: '快速入门',
                        subNav: [
                            {name: '/introduction/hello', navItem: "快速开始"},
                            {name: '/introduction/map', navItem: "map地图"},
                            {name: '/introduction/view', navItem: "view视图"}]
                    },
                    {
                        title: '常用控件', subNav: [
                            {name: '/control/zoom', navItem: "导航控件"},
                            {name: '/control/operate', navItem: "基础控件"},
                            {name: '/control/layer', navItem: "图层控件"},
                            {name: '/control/position', navItem: "位置控件"},
                            {name: '/control/overview', navItem: "鹰眼控件"},
                            {name: '/control/fullscreen', navItem: "全屏控件"},
                            {name: '/control/measure', navItem: "测量控件"},
                            {name: '/control/animation', navItem: "动画控件"},
                            {name: '/control/scaleline', navItem: "比例尺"},
                            {name: '/control/layersearch', navItem: "搜索控件"},
                        ]
                    }, {
                        title: '各种数据', subNav: [
                            {name: '/layer/image', navItem: "影像图层"},
                            {name: '/layer/tile', navItem: "瓦片图层"},
                            {name: '/layer/vector1', navItem: "矢量图层1"},
                            {name: '/layer/vector2', navItem: "矢量图层2"},
                            {name: '/layer/vector/tile', navItem: "矢量瓦片图层"},
                            {name: '/layer/debug', navItem: "瓦片网格"},
                            /*{name: '/layer/bd', navItem: "百度地图"},*/
                            {name: '/layer/gd', navItem: "高德地图"},
                            {name: '/layer/tdt', navItem: "天地图"},
                            {name: '/layer/gg', navItem: "谷歌地图"},
                            {name: '/layer/bing', navItem: "Bing地图"},
                            {name: '/layer/arcgis', navItem: "ArcGIS"},
                            {name: '/layer/geojson', navItem: "Geojson"},
                            {name: '/layer/topojson', navItem: "Topojson"},
                            {name: '/layer/esrijson', navItem: "Esrijson"},
                            {name: '/layer/wkt', navItem: "WKT"},
                            {name: '/layer/wkb', navItem: "WKB"},
                            {name: '/layer/xml', navItem: "XML"},
                            {name: '/layer/kml', navItem: "KML"},
                            {name: '/layer/gml', navItem: "GML"},
                            {name: '/layer/gpx', navItem: "GPX"},
                        ]
                    },
                    {
                        title: '地图交互',
                        subNav: [
                            {name: '/map/interaction', navItem: "地图交互"},
                            {name: '/map/draw', navItem: "图形绘制"},
                            {name: '/map/select', navItem: "图形选中"},
                            {name: '/map/modify', navItem: "图形编辑"},
                            {name: '/map/snap', navItem: "鼠标捕捉"},
                            {name: '/map/extent', navItem: "范围交互"},
                            {name: '/map/pointer', navItem: "鼠标交互"},
                            {name: '/map/translate', navItem: "要素平移"},
                            {name: '/map/dragbox', navItem: "拖拽盒子"},
                            {name: '/map/dragpan', navItem: "拖拽平移"},
                            {name: '/map/dragdrop', navItem: "拖入数据"},
                            {name: '/map/keyboardpan', navItem: "键盘平移"},
                            {name: '/map/dragrotate', navItem: "拖拽旋转"},
                            {name: '/map/dragzoom', navItem: "拖拽缩放"},
                            {name: '/map/keyboardzoom', navItem: "键盘缩放"},
                            {name: '/map/mousewheelzoom', navItem: "滚轮缩放"},
                            {name: '/map/doubleclickzoom', navItem: "双击缩放"},
                            {name: '/map/dragrotatezoom', navItem: "拖拽旋转缩放"},
                        ]
                    }, {
                        title: 'OGC服务',
                        subNav: [
                            {name: '/ogc/wms', navItem: "wms"},
                            {name: '/ogc/wcs', navItem: "wcs"},
                            {name: '/ogc/wmts', navItem: "wmts"},
                            {name: '/ogc/wfs', navItem: "wfs"},
                        ]
                    }, {
                        title: '过滤器', subNav: [
                            {name: '/filter/bbox', navItem: "bbox过滤"},
                            {name: '/filter/contains', navItem: "contains过滤"},
                            {name: '/filter/intersects', navItem: "intersects过滤"},
                            {name: '/filter/disjoint', navItem: "disjoint过滤"},
                            {name: '/filter/dwithin', navItem: "dwithin过滤"},
                            {name: '/filter/within', navItem: "within过滤"},
                            {name: '/filter/between', navItem: "between过滤"},
                            {name: '/filter/during', navItem: "during过滤"},
                            {name: '/filter/equalTo', navItem: "equalTo过滤"},
                            {name: '/filter/greaterThan', navItem: "greaterThan过滤"},
                            {name: '/filter/isNull', navItem: "isNull过滤"},
                            {name: '/filter/lessThan', navItem: "lessThan过滤"},
                            {name: '/filter/like', navItem: "like过滤"},
                            {name: '/filter/and', navItem: "and逻辑运算"},
                            {name: '/filter/not', navItem: "not逻辑运算"},
                            {name: '/filter/or', navItem: "or逻辑运算"},
                        ]
                    }, {
                        title: '样式配置', subNav: [
                            {name: '/style/style', navItem: "style"},
                            {name: '/style/geometry', navItem: "geometry"},
                            {name: '/style/fill', navItem: "fill"},
                            {name: '/style/icon', navItem: "icon"},
                            {name: '/style/text', navItem: "text"},
                            {name: '/style/circle', navItem: "circle"},
                            {name: '/style/stroke', navItem: "stroke"},
                            {name: '/style/regularShape', navItem: "regularShape"},
                        ]
                    }, {
                        title: '投影转换', subNav: [
                            {name: '/proj/transform', navItem: "投影转换"},
                            {name: '/proj/transform/method', navItem: "投影转换方法"},
                        ]
                    }, {
                        title: '高级功能',
                        subNav: [
                            {name: '/advance/picture', navItem: "地图标注"},
                            {name: '/advance/popup', navItem: "气泡标注"},
                            {name: '/advance/multi', navItem: "视图联动"},
                            {name: '/advance/location', navItem: "地图导航"},
                            {name: '/advance/heatMap', navItem: "热点地图"},
                            {name: '/advance/sign', navItem: "军事标绘"},
                        ]
                    }, {
                        title: 'canvas渲染',
                        subNav: [
                            {name: '/canvas/layer', navItem: "canvas瓦片"},
                            {name: '/canvas/geometry', navItem: "canvas渲染几何"},
                            {name: '/canvas/points', navItem: "canvas渲染要素"},
                            {name: '/canvas/image', navItem: "canvas渲染影像"}
                        ]
                    }, {
                        title: 'webgl渲染',
                        subNav: [
                            {name: '/webgl/layer', navItem: "webgl瓦片"},
                            {name: '/webgl/style', navItem: "webgl瓦片样式"},
                            {name: '/webgl/points', navItem: "webgl点精灵"}
                        ]
                    },
                    {
                        title: '项目实战echart',
                        subNav: [
                            {name: '/project/scatter', navItem: "散点图"},
                            {name: '/project/migration', navItem: "迁徙图"},
                            {name: '/project/air', navItem: "空气质量"},
                        ]
                    }, {
                        title: '项目实战cesium',
                        subNav: [
                            {name: '/project/cesium', navItem: "二三维联动"},
                        ]
                    }, {
                        title: '项目实战wind',
                        subNav: [
                            {name: '/project/wind', navItem: "全球风场"},
                        ]
                    }, {
                        title: '项目实战geoserver',
                        subNav: [
                            {name: '/project/wms', navItem: "GeoServerWMS"},
                            {name: '/project/wmts', navItem: "GeoServerWMTS"},
                            {name: '/project/wfs', navItem: "GeoServerWFS"},
                            {name: '/project/edit', navItem: "GeoServer在线编辑"},
                        ]
                    }, {
                        title: '项目实战turf',
                        subNav: [
                            {name: '/project/intersect', navItem: "相交分析"},
                            {name: '/project/difference', navItem: "差异分析"},
                            {name: '/project/union', navItem: "空间合并"},
                            {name: '/project/buffer', navItem: "缓冲分析"},
                            {name: '/project/dynamic', navItem: "动态缓冲"},
                        ]
                    }, {
                        title: '项目实战其他',
                        subNav: [
                            {name: '/project/frontcover', navItem: "正向遮罩"},
                            {name: '/project/backcover', navItem: "反向遮罩"},
                            {name: '/project/track', navItem: "路径回放"},
                            {name: '/project/export', navItem: "地图导出"},
                            {name: '/project/pdf', navItem: "导出PDF"},
                            {name: '/project/circle', navItem: "警告圈"},
                            {name: '/project/kriging', navItem: "克里金"},
                            {name: '/project/swipe', navItem: "卷帘地图"},
                        ]
                    }
                ]
            };
        },
        mounted() {

        },
        methods: {}
    }
</script>

<style scoped>
    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 200px;
        min-height: 400px;
        position: relative;
    }

    [class*=" el-icon-arrow"] {
        font-size: 25px;
        color: white;
        opacity: 0.6;
    }

    ul >>> .el-menu--popup {
        background: #0a567b;
        min-width: 160px;
    }
</style>
